<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import { onMounted, ref } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

onMounted(() => {
  renderEcharts({
    series: [
      {
        animationDelay() {
          return Math.random() * 400;
        },
        animationEasing: 'exponentialInOut',
        animationType: 'scale',
        center: ['50%', '50%'],
        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
        data: [
          { name: '上海', value: 500 },
          { name: '北京', value: 310 },
          { name: '广东', value: 274 },
          { name: '重庆', value: 400 },
        ].sort((a, b) => a.value - b.value),
        name: '分布',
        radius: '80%',
        roseType: 'radius',
        type: 'pie',
        // 修改标签配置
        label: {
          show: false, // 显示标签
          position: 'inside', // 标签显示在扇区内部
          formatter: '{b}', // 只显示名称
          color: '#fff', // 白色文字
          fontSize: 12,
          fontWeight: 'bold',
          textShadowColor: 'rgba(0,0,0,0.5)', // 文字阴影增强可读性
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        labelLine: {
          show: false // 隐藏引导线
        },
        emphasis: {
          label: {
            show: true // 高亮时保持显示
          }
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a}<br/>{b}: {c} ({d}%)' // 保留tooltip详细信息
    }
  });
});
</script>

<template>
  <EchartsUI ref="chartRef" />
</template>
